<script setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts";

let chart = ref();

function chartInit() {
  let myChart = echarts.init(chart.value);

  const option = {
    radar: {
      indicator: [
        { name: "1月", max: 20 },
        { name: "2月", max: 20 },
        { name: "3月", max: 20 },
        { name: "4月", max: 20 },
        { name: "5月", max: 20 },
        { name: "6月", max: 20 },
        { name: "7月", max: 20 },
        { name: "8月", max: 20 },
        { name: "9月", max: 20 },
        { name: "10月", max: 20 },
        { name: "11月", max: 20 },
        { name: "12月", max: 20 },
      ],
      splitArea: {
        //分割区域
        areaStyle: {
          //区域样式
          color: ["#70A576", "#B3A360"], //可以设置多个
        },
      },
    },
    series: [
      {
        type: "radar",
        data: [
          {
            value: [12, 18, 14, 8, 19, 7, 6, 10, 10, 7, 9, 9],
            itemStyle: {
              color: "red",
            },
            areaStyle: {
              //区域样式
              color: "#1FD5E7", //可以设置多个
            },
            label: {
              show: true, //数据的显示
              textStyle: {
                color: "#fff",
              },
            },
          },
        ],
      },
    ],
  };
  myChart.setOption(option);
  window.addEventListener("resize", () => {
    myChart.resize();
  });
}
onMounted(() => {
  chartInit();
});
</script>

<template>
  <div class="boxstyle">
    <div class="title">项目管理</div>
    <div ref="chart" style="width: 100%; height: 240px"></div>
  </div>
</template>

<style scoped></style>
